<template>
	<view class="wrap">

		<u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="top" :border-bottom="false">
			<u-form-item label="旧密码" prop="oldPassword" label-width="180" :border-bottom="false">
				<view class="bor">
					<u-input class="input" type="password" v-model="model.oldPassword" placeholder="请输入旧密码"></u-input>
				</view>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword" label-width="180" :border-bottom="false">
				<view class="bor">
					<u-input  class="input" type="password" v-model="model.newPassword" placeholder="请输入新密码"></u-input>
				</view>
			</u-form-item>
			<u-form-item label="确认密码" prop="confirmPassword" label-width="180" :border-bottom="false">
				<view class="bor">
					<u-input class="input" type="password" v-model="model.confirmPassword" placeholder="请确认新密码"></u-input>
				</view>
			</u-form-item>

			<u-form-item label="验证码" prop="yzm" label-width="180" :border-bottom="false">
				<view class="bor">
					<u-input  maxlength="6" type="number" v-model="model.yzm" placeholder="请输入验证码"></u-input>
					<view class="code">
						<view class="line"></view>
						<view class="btns" @click="getCode">{{Tips}}
						</view>
					</view>
				</view>
			</u-form-item>
		</u-form>
<u-verification-code endText="获取验证码" startText="获取验证码" seconds="60" ref="uCode" @change="codeChange">
		</u-verification-code>
		<view class="form-footer">
			
			<view class="item1">
				<u-button shape="circle" type="error" @click="submit" :ripple="true" ripple-bg-color="#d7d8da">确认修改
				</u-button>
			</view>
			<!-- <u-button class="btn" type="primary" @click="submit">提交</u-button> -->
		</view>
	</view>
</template>
<script>
	import base64 from '@/common/base64.js';
	export default {
		data() {
			return {
				Tips: '获取验证码',
				model: {
					oldPassword: '',
					newPassword: '',
					confirmNewPassword: '',
					yzm: ''
				},
				rules: {
					yzm: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: ['change', 'blur'],
					}],
					newPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{7,16}$/,
							message: '需同时含有字母和数字，长度在8-16之间',
							trigger: ['change', 'blur'],
						}
					],
					confirmPassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.newPassword;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
			
				this.Tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// console.log(this.phone, 444444444444);
					// if (!this.phone) {
					// 	this.$u.toast('请输入手机号');
					// 	return
					// }
					// if (!this.$u.test.mobile(this.phone)) {
					// 	this.$u.toast('手机号码输入有误');
					// 	return
					// }
					// // 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
			
			
					this.$u.api.miniUsercaptcha()
						.then((res) => {
			
							if (res.code == 'ok') {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
			
							} else {
								
								this.$u.toast(res.msg);
								// console.log("请求数据失败");
							}
						});
			
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.updatePassword({
							password: this.model.oldPassword,
							newPassword: this.model.newPassword,
							captcha:this.model.yzm
						}).then(res => {
							if (res.code == 'ok') {
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel: false,
									success: function() {
										// uni.navigateBack();
										uni.reLaunch({
											url:"/pages/sys/login/index"
										})
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel: false
								});
							}
						});
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}
	.item1 {
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
	}
	/deep/ .input{
		flex: 1 !important;
	}

	/deep/ .bor {

		margin: 0 auto 10rpx;
		width: 100%;
		height: 80rpx;
		background: rgba(232, 230, 229, 0.12);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		border: 2rpx solid #F1F1F1;
		padding:0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.code {
			display: flex;
			align-items: center;
		
			.line {
				width: 2rpx;
				height: 28rpx;
				background: #E4E4E4;
			}
		
			.btns {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FA4A53;
				line-height: 40rpx;
				text-align: justified;
				font-style: normal;
				text-transform: none;
				padding-left: 14rpx;
			}
		
		
		}
	}

	/deep/ .u-form-item--left__content__label {
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(15, 20, 23, 0.6);
		line-height: 33rpx;
		text-align: justified;
		margin-bottom: 10rpx;
	}

	.wrap {
		padding: 0 80rpx;
	}

	.wrap .form {
		padding: 0 !important;
	}

	// .u-form{
	// 	background: #fff;
	// 	padding: 0px 15px;
	// }
	.remind-text {
		padding: 20rpx 30rpx;
		color: #666666;
	}
</style>
